<template>
  <div>
    <!-- -->
    <van-nav-bar title="萌宠分类">
      <template #right>
        <!-- <van-icon name="search" size="20" /> -->
      </template>
    </van-nav-bar>
    <!--  -->
    <div class="box">
      <van-sidebar v-model="activeKey" @change="onChange">
        <van-sidebar-item v-for="item in category" :title="item.title" :key="item.id" />
      </van-sidebar>
      <div class="main_cont">
        <van-card v-for="item in goodData" :key="item.id" @click="toinfo(item.id)" :desc="item.desc" :title="item.name"
          :thumb="item.coverURL">
        </van-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Vue2Category',

  data() {
    return {
      activeKey: 0,
      allData: [],
      category: [],
      pettype: ""
    };
  },
  mounted() {
    this.getData();
    this.getCategoryData();
  },
  computed: {
    goodData: function () {
      let data = [];
      data = this.allData.filter(item => {
        return item.pettype == this.pettype
      })
      return data;
    }
  },
  methods: {
    toinfo(goodid) {
      this.$router.push("/goodinfo?goodid=" + goodid)
    },
    onChange(index) {
      this.pettype = this.category[index].id
    },
    getData() {
      this.$axios({
        url: "./localdata/petlist.json"
      }).then(res => {
        // console.log(res);
        this.allData = res.data
      })
    },
    getCategoryData() {
      this.$axios({
        url: "./localdata/type.json"
      }).then(res => {
        console.log(res);
        this.category = res.data
        this.pettype = this.$route.query.pettype || this.category[0].id
        this.activeKey = this.category.findIndex(item => {
          return item.id == this.pettype
        })

      })
    }
  },
};
</script>
<style scoped>
.van-nav-bar.van-hairline--bottom {
  background-image: linear-gradient(278deg, #fff1eb 0%, #ace0f9 100%);
}

.main_cont {
  width: calc(100% - 80px);
  height: 100%;
  overflow-y: scroll;
}

div.box {
  display: flex;
  height: calc(100vh - 40px - 50px);

}

.van-card__content {
  display: flex;
  justify-content: space-around;
}

.van-card__title.van-multi-ellipsis--l2 {
  max-height: none;
  font-size: 5vw;
  line-height: 1;
}

.van-card__desc.van-ellipsis {
  font-size: 4vw;
  line-height: 2;
  max-height: none;
}

.van-sidebar {
  width: 20vw;
}

.van-sidebar-item {
  font-size: 6vw;
  margin-top: 3vw;
}

.van-sidebar-item__text {
  font-size: 4vw;
}

.van-sidebar-item--select::before {
  height: 6vw;
  width: 1vw;
}

.van-image {
  height: 8vw;
}

:deep(.van-image) img {
  border-radius: 2vw;
}

.van-card__thumb {
  width: 22vw;
  height: 100%;
}
</style>